<template>
  <var-popup @click-overlay="show=false" position="bottom" :show="show">
    <div class="popup-example-block">
      <var-picker
        @cancel="show=false"
        :columns="timeCloumns"
        @confirm="onConfirm"
        @change="onChangePick"
        :title="pickTitle"
      />
    </div>
  </var-popup>
</template>

<script>
import { concatInt, formatTimeList } from "@/util/formTime";
import { ref, reactive } from "vue";
export default {
  name: "TimeSelectComponent",
  props: ["setKey", "title", "defaultValue"],
  emits: ["setForm"],
  setup(props, ctx) {
    const pickTitle = props?.title || "请选择";
    // console.log("传进来的标题,",props?.title,pickTitle)
    const show = ref(false);
    const setShow = () => {
      show.value = !show.value;
    };
    const state = reactive({
      defaultValue: props?.title || "" //默认值
    });
    const timeCloumns = [
      Array.from({ length: 24 }).map((_, index) => concatInt(index) + "时"),
      Array.from({ length: 60 }).map((_, index) => concatInt(index) + "分"),
      Array.from({ length: 60 }).map((_, index) => concatInt(index) + "秒")
    ];
    const column = [[1, 2, 3]];

    // 点击确定事件
    const onConfirm = val => {
      // console.log("点击了确认", val, "\n", formatTimeList(val));

      ctx.emit("setForm", { key: props.setKey, val: formatTimeList(val) });
      setShow();
    };

    // 改变了值
    const onChangePick = value => {
      // console.log(value);
    };

    return {
      column,
      state,
      pickTitle,
      timeCloumns,
      onConfirm,
      onChangePick,
      show,
      setShow
    };
  }
};
</script>

<style lang="scss" scoped>
.var-popup--bottom {
  height: 40%;
  .popup-example-block {
    padding: 20px 24px;
  }
}
</style>